<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="deviceLayout.js"></script>
<link rel="stylesheet" href="/css/deviceLayout.css"/>
<head>
    <meta charset="UTF-8">
</head>
</head>
<body>
<div class="wrapper">
    <div class="area" style="left: 1%; top: 4%; height: 20%; width: 30%">
        <div id="1-1-1" class="deviceArea"><p>原料放置区</p></div>
    </div>
    <div class="area" style="left: 1%;top: 28%;height: 20%;width: 30%;"></div>
    <div class="area" style="left: 1%;top: 52%;height: 20%;	width: 30%;">
        <div id="3-1-1" class="device2" style="right: 225px;">攻丝机</div>
        <div id="3-1-2" class="device2" style="right: 115px;">摇臂钻</div>
        <div id="3-1-3" class="device2" style="right: 5px;">摇臂钻</div>
        <div id="3-1-4" class="device2" style="right: 115px; top: 55px">中走丝</div>
        <div id="3-1-5" class="device2" style="right: 5px; top: 55px">中走丝</div>
    </div>
    <div class="area" style="left: 1%;top: 76%;height: 20%;	width: 30%;">
        <div id="4-1-1" class="device2" style="right: 5%;width: 200px;">加工零件成品区</div>
        <div id="4-1-2" class="device2" style="right: 5%; width: 200px;top:55px;">出货打包区</div>
    </div>
    <div class="area" style="left: 33%;top: 4%;height:20%;width: 64%;">
        <div id="1-2-1" class="deviceArea" style="float:left;width: 20%;">
            <p>原料放置区</p></div>
        <div id="1-2-2" class="device" style="left: 21%;">数控激光火焰切割机</div>
        <div id="1-2-3" class="device" style="left: 42%;">数控等离子切割机</div>
        <div id="1-2-4" class="device" style="left: 63%;">数控激光火焰切割机</div>
    </div>
    <div class="area" style="left: 33%;top:  28%;height: 20%;width: 64%;">
        <div id="2-2-1" class="device" style="left: 1%; width: 100px">卧铣</div>
        <div id="2-2-2" class="device" style="left: 17%;width: 100px">卧铣</div>
        <div id="2-2-3" class="device" style="left: 33%;width: 100px">卧铣</div>
        <div id="2-2-4" class="device" style="left: 49%;width: 100px">卧铣</div>
        <div id="2-2-5" class="device" style="left: 65%;width: 100px">卧铣</div>
        <div id="2-2-6" class="device" style="left: 80%;width: 145px">预备炮塔铣</div>

    </div>
    <div class="area" style="left: 33%;top: 52%;height:20%;	width: 64%;">
        <div id="3-2-1" class="device2" style="left:5px;">普车</div>
        <div id="3-2-2" class="device2" style="left: 110px;">普车</div>
        <div id="3-2-3" class="device2" style="left: 215px;">普车</div>
        <div id="3-2-4" class="device2" style="left: 320px;">普车</div>
        <div id="3-2-5" class="device2" style="left: 425px;width: 150px;">预备炮数控车床</div>
        <div id="3-2-6" class="device2" style="left: 630px; width: 120px; height: 96%;">折弯机</div>
        <div id="3-2-7" class="device2" style="left: 10px; top: 55px; width: 150px;">HPC650卧式加工</div>
        <div id="3-2-8" class="deviceArea" style="left: 165px; top: 55px; width: 140px; height: 30px;">CNC办公区</div>
        <div id="3-2-9" class="device2" style="left: 315px; top: 55px; width: 150px;">Vmc1000</div>
        <div id="3-2-10" class="device2" style="left: 475px; top: 55px; width: 150px;">T-V</div>

    </div>
    <div class="area" style="left: 33%;top: 76%;height: 20%;	width: 31%;">
        <div id="4-2-1" class="device2" style="width: 100px;">T111</div>
        <div id="4-2-2" class="device2" style="left: 115px; font-size: 12px">VMC1000L</div>
        <div id="4-2-3" class="device2" style="left: 230px; font-size: 12px">VMC1000L</div>
        <div id="4-2-4" class="device2" style="left: 115px;top: 55px;width: 215px; ">5000*2500龙门</div>

    </div>
    <div class="area" style="left: 66%; top: 76%; height: 20%; width: 31%;">
        <div id="3-3-1" class="device2" style="width: 95%; ">定梁式龙门GLU28*40</div>
        <div id="4-3-1" class="device2" style="top: 55px;width: 150px; ">T-V</div>
        <div id="4-3-2" class="device2" style="left: 205px;top: 55px;width: 150px; ">T-V</div>
    </div>
    <div align="center" style="position: absolute; bottom: -10px; margin: 0 auto; left: 40%;">
        <div class="legend" style="background-color:yellow">空闲</div>
        <div class="legend" style="background-color:green">运作</div>
        <div class="legend" style="background-color:red">异常</div>
        <div class="legend" style="background-color:#ffc0cb">维修</div>
    </div>
</div>
</div>
</body>
</html>